<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/ziliao.css">
    <script src="./js/jquery-1.12.2.js"></script>
    <script src="./js/ziliao.js"></script>
</head>

<body>
    <div class="ziliao-con">
        <div class="ziliao-left">
            <ul class="ziliao-l">
                <li class="zi-1">
                    个人资料
                  
                </li>
                <li class="zi-2">
                    我的账户
                </li>
                <li class="zi-3">
                    账号与密码
                </li>
                <li class="zi-4">
                    账单查询
                </li>
                <li class="zi-5">
                    系统设置
                </li>
            </ul>
        </div>
        <!-- 个人资料部分 -->
        <div class="right">
        <div class="ziliao-right">
                <div class="form">
                    <form action="">
                        <div class="form-l">
                            <span>昵称：</span>
                            <input type="text">
                            <br>
                        </div>
                        <div class="form-l">
                            <span>个性签名：</span>
                            <textarea class="qianming" placeholder="推荐填写，将在个人主页展示哦~" name="" id="" cols="30" rows="10"></textarea>
                        </div>
                        <br>
                        <div class="form-l">
                            <span>性别：</span>
                            <div class="form-r">
                                保密：
                                <input type="checkbox"> 女
                                <input type="checkbox" name="" id=""> 男
                                <input type="checkbox">
                                <br>
                            </div>
                        </div>
                        <div class="form-l">
                            <span>城市：</span>
                            <div class="form-r">
                                <select name="" id="">
                                    <option value="">北京</option>
                                    <option value="">上海</option>
                                </select>
                                <select name="" id="">
                                    <option value="">北京</option>
                                    <option value="">上海</option>
                                </select>
                                <br>
                            </div>
                        </div>
                        <div class="form-l">
                            <span>职业：</span>
                            <input type="text">
                            <br>
    
                        </div>
                        <div class="form-btn">
                            <input type="submit" value="取消">
                            <input type="submit" value="确定">
                        </div>
                    </form>
                </div>
                <div class="ziliao-r">
                    <div class="touxiang">
                    </div>
                    <span>修改头像</span>
                    <p>账户类型：普通类型</p>
                    <div class="confirm">
                        <p>成为认证设计师,</p>
                        <p>获取佣金！</p>
                        <p>额外赠送价值49元新人礼!</p>
                        <span>了解如何验证</span>
                        <div class="saojiao">
                            <img src="./images/jiao.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        <!-- 个人资料部分结束-->
        <!-- 我的账户部分 -->
        <div class="account">
            <div class="account-l">
                <h4>当前版本：</h4>
                <h5>基础版</h5>
                <span>升级为专业版</span>
            </div>
            <div class="account-l">
                <h4>兑换码：</h4>
                <input type="text" placeholder="点此输入专业版兑换码">
                <input type="submit" value="提交">
            </div>
            <div class="wel-content">
                <ul>
                    <li>专业版功能</li>
                    <li>
                        <span>无限</span>
                        <p>画布编辑与模板功能</p>
                    </li>
                    <li>
                        <span>无限</span>
                        <p>再创作功能</p>
                    </li>
                    <li>
                        <span>无限</span>
                        <p>拼图容量</p>
                    </li>
                    <li>
                        <span>无限</span>
                        <p>项目容量</p>
                    </li>
                    <li>
                        <span>无限</span>
                        <p>自动抠图功能</p>
                    </li>
                    <li>
                        <span>无限</span>
                        <p>普清图片下载</p>
                    </li>
                    <li>
                        <span>无限</span>
                        <p>高清大图下载</p>
                    </li>
                    <li>
                        <span>无限</span>
                        <p>导出Excel清单</p>
                    </li>
                    <li>
                        <span>无限</span>
                        <p>导出图文PDF</p>
                    </li>
                    <li>
                        <span>无限</span>
                        <p>“我的单品”智能筛选</p>
                    </li>
                </ul>
            </div>
        </div>
         <!-- 我的账户部分 -->
        <!-- 账号与密码 -->
        <div class="zhanghao">
            <div class="zhanghao-r">
               <p>当前账户</p>
               <span><img src="./images/mobile.png" alt="">11555555555555</span>
               <div class="update">
                   <input type="submit" value="修改手机号">
                   <input type="submit" value="修改密码">
               </div>
            </div>
            <div class="zhanghao-r">
                <p>绑定第三方账号</p>
                <span><img src="./images/weixin1.png" alt="">1555555555555</span>
                <div class="update">
                        <input type="submit" value="已绑定">
                        
                    </div>
            </div>
        </div>
        <!-- 账号与密码 -->
        <!-- 查询 -->
        <div class="chaxun">
            <p>购买记录</p>
            <table class="biaoge">
                <thead>
                    <tr>
                <th>日期</th>
                <th>购买方案</th>
                <th>金额</th>
                <th>支付网关</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
            </table>
            <div class="buy">暂无购买记录</div>
            <div class="contract">可申请发票，如需请联系美间客服</div>
        </div>
         <!-- 查询 -->
 </div>
       
</div>
</body>

</html>